<template>
  <div class="DetailsCustomerTrajectory">
    <div class="noData" v-show="pageData.total == 0">暂无数据</div>
    <div :style="{ height: onresizeHeight, overflow: 'auto' }" ref="TimelineHeight" class="TimelineHeight">
      <div v-for="(item, index) in customerFootprintData" :key="index">
        <Divider orientation="left" class="item_date">{{ item.date }}</Divider>
        <Timeline>
          <template v-for="(itemK, index) in item.customerDynamicDTOS">
            <!-- actionCode：动作类型 （1: 创建客户 2：从其他案场加入客户 3：发送置业计划书 4：签到 5： 阅读置业计划书 6：分享置业计划书  7:分配客户  8:代为接待客户  13:提交回款审核  22:回款审核通过  25:未到访客户录入  26:线上线索推送(归属顾问可能不存在） 27:专案线索分配  28:授权）  -->
            <!-- 1 === 创建客户 -->
            <TimelineItem v-if="itemK.actionCode == 1" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 2 === 从其他案场加入客户 -->
            <TimelineItem v-if="itemK.actionCode == 2" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 3 === 向客户发送置业报告 -->
            <TimelineItem v-if="itemK.actionCode == 3" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">
                {{ itemK.dynamicInfoDto.dynamicContent }}（{{ itemK.dynamicInfoDto.linkTitle }}）
              </div>
            </TimelineItem>
            <!-- 4 === 签到 -->
            <TimelineItem v-if="itemK.actionCode == 4" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.customerName }}</span>
                <span v-if="itemK.customerPhone">（{{ itemK.customerPhone }}）</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 5 === 阅读置业计划书 -->
            <TimelineItem v-if="itemK.actionCode == 5" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.customerName }}</span>
                <span v-if="itemK.customerPhone">（{{ itemK.customerPhone }}）</span>
              </div>
              <div class="time_line_content">
                {{ itemK.dynamicInfoDto.dynamicContent }}
                <span v-if="itemK.dynamicInfoDto.linkTitle">（{{ itemK.dynamicInfoDto.linkTitle }}）</span>
              </div>
            </TimelineItem>
            <!-- 6 === 向客户发送置业报告 -->
            <TimelineItem v-if="itemK.actionCode == 6" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">
                {{ itemK.dynamicInfoDto.dynamicContent }}（{{ itemK.dynamicInfoDto.linkTitle }}）
              </div>
            </TimelineItem>
            <!-- 7 === 分配客户 -->
            <TimelineItem v-if="itemK.actionCode == 7" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 8 === 代为接待客户 -->
            <TimelineItem v-if="itemK.actionCode == 8" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 13 === 提交回款审核 -->
            <TimelineItem v-if="itemK.actionCode == 13" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 22 === 回款审核通过 -->
            <TimelineItem v-if="itemK.actionCode == 22" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 25:未到访客户录入 -->
            <TimelineItem v-if="itemK.actionCode == 25" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 26:线上线索推送(归属顾问可能不存在） -->
            <TimelineItem v-if="itemK.actionCode == 26" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 27:专案线索分配 -->
            <TimelineItem v-if="itemK.actionCode == 27" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 28:授权 -->
            <TimelineItem v-if="itemK.actionCode == 28" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.customerName }}({{ itemK.customerPhone }})</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 29:浏览了线上售楼处 -->
            <TimelineItem v-if="itemK.actionCode == 29" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.customerName }}({{ itemK.customerPhone }})</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <TimelineItem v-if="itemK.actionCode == 30" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.customerName }}({{ itemK.customerPhone }})</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <TimelineItem v-if="itemK.actionCode == 31" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.customerName }}({{ itemK.customerPhone }})</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 录音 -->
            <TimelineItem :key="index" v-if="itemK.actionCode == 33">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.customerName }}({{ itemK.customerPhone }})</span>
                <span class="audioPlay" @click="audioPlay(itemK.fileUrl)">播放</span>
                <span class="audioPlay" @click="audioDownload(itemK.fileUrl)">下载</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <TimelineItem :key="index" v-if="itemK.actionCode == 34">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.customerName }}({{ itemK.customerPhone }})</span>
                <span class="audioPlay" @click="audioPlay(itemK.fileUrl)">播放</span>
                <span class="audioPlay" @click="audioDownload(itemK.fileUrl)">下载</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 35 === 意向等级修改 -->
            <TimelineItem v-if="itemK.actionCode == 35" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">
                {{ itemK.dynamicInfoDto.dynamicContent }}
              </div>
            </TimelineItem>
            <!-- 36 === 渠道修改记录 -->
            <TimelineItem v-if="itemK.actionCode == 36" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">
                {{ itemK.dynamicInfoDto.dynamicContent }}
              </div>
            </TimelineItem>
            <!-- 线索导入分配 -->
            <TimelineItem v-if="itemK.actionCode == 37" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 抢客池抢客 -->
            <TimelineItem v-if="itemK.actionCode == 40" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.userName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 多案场客户 -->
            <TimelineItem v-if="itemK.actionCode == 41" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.customerName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
            <!-- 通过客户池获得手机号 -->
            <TimelineItem v-if="itemK.actionCode == 42" :key="index">
              <div class="time_line_title">
                <span>{{ $tool.dateFtt('hh:mm', itemK.dynamicTime) }}</span>
                <span>{{ itemK.customerName }}</span>
              </div>
              <div class="time_line_content">{{ itemK.dynamicInfoDto.dynamicContent }}</div>
            </TimelineItem>
          </template>
        </Timeline>
      </div>
    </div>
    <div class="pagePublicStyle" v-show="pageData.total > 0">
      <div class="totalCount">
        当前第 {{ pageData.page }} 页， 当前第 {{ (pageData.page - 1) * pageData.rows + 1 }} 条到第
        {{ pageData.page * pageData.rows > pageData.total ? pageData.total : pageData.page * pageData.rows }}
        条， 共 {{ pageData.total }} 条
      </div>
      <Page
        class="pager"
        :total="pageData.total"
        :pageSize="pageData.rows"
        :current="pageData.page"
        :page-size-opts="pageData.pageSizeOpts"
        @on-change="pageOnChangeFun"
        @on-page-size-change="pageOnPageSizeChangeFun"
        placement="top"
        show-elevator
        show-sizer />
    </div>
    <dt-audio ref="dtAudio" />
  </div>
</template>
<script>
  import customerMgr from '@/biz/customer/customer'
  import toolApi from '@/biz/base/tool'

  export default {
    components: {},
    props: {
      detailsParams: {
        type: Object,
        default: () => {
          return null
        }
      }
    },
    data() {
      return {
        customerFootprintData: [],
        pageData: {
          total: 0,
          page: 1,
          rows: 10,
          pageSizeOpts: [10, 20, 30, 40, 50]
        },
        onresizeHeight: 0,
        srcAudio: ''
      }
    },
    methods: {
      audioPlay(val) {
        if (val) {
          this.$refs.dtAudio.show(val)
        } else {
          this.$Message.warning('暂无录音')
        }
      },
      audioDownload(val) {
        if (val) {
          toolApi.downloadFile(
            val,
            '音频',
            '',
            'audio/mpeg;audio/ogg;audio/aac;audio/wav;audio/webm',
            'noHomologous'
          )
        } else {
          this.$Message.warning('暂无录音')
        }
      },
      // 分页 页码改变事件
      pageOnChangeFun(page) {
        if (page != 1 || this.pageData.page != 1) {
          this.pageData.page = page
          this.initData()
        }
      },
      // 分页 每页条数改变事件
      pageOnPageSizeChangeFun(rows) {
        this.pageData.rows = rows
        this.pageData.page = 1
        this.initData()
      },
      // 初始化获取数据
      initData() {
        let params = {
          userCustomerId: this.detailsParams
            ? this.detailsParams.userCustomerId
            : this.$route.query.userCustomerId,
          buildingId: this.detailsParams ? this.detailsParams.buildingId : this.$route.query.buildingId,
          type: 1,
          customerId: this.detailsParams ? this.detailsParams.customerId : this.$route.query.customerId,
          hasClue: this.detailsParams.flag == 'clue' ? 0 : 1,
          page: this.pageData.page,
          rows: this.pageData.rows
        }
        customerMgr.webGetCustomerDynamicList(params).then((res) => {
          console.log(res, '客户动态')
          if (res && res.list) {
            this.customerFootprintData = this.getformatData(res.list)
            this.pageData.total = Number(res.total)
          } else {
            this.pageData.total = 0
            this.customerFootprintData = []
          }
        })
      },
      getformatData(sortData) {
        const groupBy = (array, f) => {
          let groups = {}
          let group = ''
          array.forEach((o) => {
            group = JSON.stringify(f(o))
            groups[group] = groups[group] || []
            groups[group].push(o)
          })
          return Object.keys(groups).map((group) => {
            return {
              customerDynamicDTOS: groups[group],
              date: groups[group][0].dynamicDate
            }
          })
        }
        const sorted = groupBy(sortData, (item) => {
          return item.dynamicDate
        })
        return sorted
      }
    },
    created() {
      // 初始化获取数据
      this.initData()
      this.$nextTick(() => {
        console.log(this.$refs.TimelineHeight)
        this.onresizeHeight = window.innerHeight - this.$refs.TimelineHeight.offsetTop - 260 + 'px'
      })
    }
  }
</script>
<style lang="scss" scoped>
  .DetailsCustomerTrajectory {
    margin-top: 16px;

    .ivu-timeline-item-content {
      padding-bottom: 0;
    }

    p {
      margin-bottom: 4px;

      span:nth-child(1) {
        display: inline-block;
        width: 300px;
      }
    }

    .time_line_title {
      color: #194fe8;
      margin-bottom: 20px;
      font-size: 15px;

      span:nth-child(1) {
        display: inline-block;
        width: 200px;
        margin-right: 20px;
      }
    }

    .time_line_content {
      font-size: 15px;
    }

    .item_date {
      font-size: 20px;
    }
  }

  .noData {
    width: 100%;
    font-size: 16px;
    text-align: center;
    padding: 50px 0;
  }

  .audioPlay {
    margin-left: 20px;
    cursor: pointer;
  }
</style>
